{% extends 'dashboard/base.html' %}
{% load static %}

{% block title %}用户详情 - {{ target_user.username }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">用户详情</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{% url 'dashboard:user_management' %}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回用户列表
        </a>
    </div>
</div>

<div class="row">
    <!-- 用户基本信息 -->
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">基本信息</h5>
            </div>
            <div class="card-body text-center">
                {% if target_user.avatar %}
                <img src="{{ target_user.avatar.url }}" alt="头像" class="rounded-circle mb-3" width="100" height="100">
                {% else %}
                <div class="bg-secondary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                     style="width: 100px; height: 100px;">
                    <i class="bi bi-person-fill text-white fs-1"></i>
                </div>
                {% endif %}
                
                <h4>{{ target_user.nickname|default:target_user.username }}</h4>
                <p class="text-muted">@{{ target_user.username }}</p>
                
                <div class="row text-start">
                    <div class="col-12 mb-2">
                        <strong>邮箱:</strong> {{ target_user.email }}
                    </div>
                    {% if target_user.phone %}
                    <div class="col-12 mb-2">
                        <strong>手机:</strong> {{ target_user.phone }}
                    </div>
                    {% endif %}
                    <div class="col-12 mb-2">
                        <strong>用户类型:</strong>
                        <span class="badge 
                            {% if target_user.user_type == 'normal' %}bg-secondary
                            {% elif target_user.user_type == 'admin' %}bg-primary
                            {% else %}bg-success{% endif %}">
                            {{ target_user.get_user_type_display }}
                        </span>
                    </div>
                    <div class="col-12 mb-2">
                        <strong>状态:</strong>
                        <span class="badge {% if target_user.is_active %}bg-success{% else %}bg-danger{% endif %}">
                            {{ target_user.is_active|yesno:"活跃,禁用" }}
                        </span>
                    </div>
                    <div class="col-12 mb-2">
                        <strong>注册时间:</strong> {{ target_user.date_joined|date:"Y-m-d H:i" }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户统计 -->
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3>{{ created_activities.count }}</h3>
                                <p class="mb-0">创建的活动</p>
                            </div>
                            <div class="align-self-center">
                                <i class="bi bi-calendar-plus fs-1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3>{{ registered_activities.count }}</h3>
                                <p class="mb-0">参与的活动</p>
                            </div>
                            <div class="align-self-center">
                                <i class="bi bi-calendar-check fs-1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3>{{ followers_count }}</h3>
                                <p class="mb-0">粉丝</p>
                            </div>
                            <div class="align-self-center">
                                <i class="bi bi-people fs-1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3>{{ following_count }}</h3>
                                <p class="mb-0">关注</p>
                            </div>
                            <div class="align-self-center">
                                <i class="bi bi-person-plus fs-1"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 积分信息 -->
        {% if user_points %}
        <div class="card shadow mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">积分信息</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-4">
                        <h4 class="text-primary">{{ user_points.total_points }}</h4>
                        <p class="text-muted mb-0">总积分</p>
                    </div>
                    <div class="col-md-4">
                        <h4 class="text-success">{{ user_points.available_points }}</h4>
                        <p class="text-muted mb-0">可用积分</p>
                    </div>
                    <div class="col-md-4">
                        <h4 class="text-warning">{{ user_points.used_points }}</h4>
                        <p class="text-muted mb-0">已用积分</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- 最近创建的活动 -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header">
                <h5 class="card-title mb-0">最近创建的活动</h5>
            </div>
            <div class="card-body">
                {% if recent_activities %}
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>活动标题</th>
                                <th>状态</th>
                                <th>参与人数</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for activity in recent_activities %}
                            <tr>
                                <td>{{ activity.title|truncatechars:40 }}</td>
                                <td>
                                    <span class="badge 
                                        {% if activity.status == 'approved' %}bg-success
                                        {% elif activity.status == 'pending' %}bg-warning
                                        {% elif activity.status == 'rejected' %}bg-danger
                                        {% else %}bg-secondary{% endif %}">
                                        {{ activity.get_status_display }}
                                    </span>
                                </td>
                                <td>{{ activity.current_participants }}/{{ activity.max_participants }}</td>
                                <td>{{ activity.created_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'activities:activity_detail' activity.id %}" 
                                       class="btn btn-sm btn-info" target="_blank">查看</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted text-center">该用户尚未创建任何活动</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}